<template>
  <d2-container>
    <div style="display:flex;width:100%;">
      <div style="display:flex;flex-direction: column;">
        <h3>当天每个时间点剩余任务数</h3>
        <el-table
          :data="timetasklist"
          border
          style="width: 100%">
          <el-table-column
            prop="time"
            width="150"
            align="center"
            label="每日时间点">
            <template slot-scope="scope">
              {{ scope.row.time * 1000 | moment }}
            </template>
          </el-table-column>
          <el-table-column
            prop="num"
            width="150"
            align="center"
            label="时间点任务数">
            <template slot-scope="scope">
              {{ scope.row.num }}单
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="display:flex;flex-direction: column;margin-left:2%;">
        <h3>各个分组申请人数</h3>
        <el-table
          :data="maplist"
          border
          style="width: 100%">
          <el-table-column
            prop="time"
            align="center"
            width="150"
            label="分组">
            <template slot-scope="scope">
              {{ scope.row.time }}
            </template>
          </el-table-column>
          <el-table-column
            prop="num"
            width="150"
            align="center"
            label="分组申请人数">
          </el-table-column>
        </el-table>
      </div>
      <div style="display:flex;flex-direction: column;margin-left:2%;">
        <h3>查看当前分组内任务剩余总数</h3>
        <el-table
          :data="redislist"
          border
          style="width: 100%">
          <el-table-column
            prop="time"
            align="center"
            width="150"
            label="分组">
            <template slot-scope="scope">
              {{ scope.row.time }}
            </template>
          </el-table-column>
          <el-table-column
            prop="num"
            width="150"
            align="center"
            label="时间点任务数">
          </el-table-column>
        </el-table>
      </div>
      <div style="margin:2%;">
         <span>添加申请人数：</span>
         <el-button type="primary" @click="dialogVisible = true">添加</el-button>
      </div>
      <el-dialog
        title="添加申请人数"
        :visible.sync="dialogVisible"
        width="30%">
        <div style="display:flex;flex-direction: column;margin-top:5%;">
          <div style="display:flex;align-items: center;justify-content: flex-start;">
            <span style="font-size:18px;">选择日期：</span>
            <el-date-picker
              style="display:flex;align-items:center;justify-content:center;"
              v-model="timeval"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
          </div>
          <br/>
          <div style="display:flex;justify-content:flex-start;align-items: center;">
            <span style="font-size:18px;">店铺名字：</span>
            <el-input type="text" v-model="peopling" style="width:150px;" placeholder="请输入店铺名字"></el-input>
          </div>
          <span style="margin-left:2%;">{{ messages }}</span>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addperpon()">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </d2-container>
</template>

<script>
import {TimeTaskList, AutomaticApplication, MapList, RedisList} from "@/api/sys.login";

export default {
  name: "index",
  data() {
    return {
      timetasklist: [],
      maplist: [],
      redislist: [],
      peopling: "",
      timeval: [],
      messages: "",
      dialogVisible:false,
    }
  },
  methods: {
    addperpon() {
      let params = {
        shopName: this.peopling,
        beginTime: this.timeval[0],
        endTime: this.timeval[1]
      }
      AutomaticApplication(params).then((res) => {
        console.log(res);
        if (res.status == 200) {
          this.messages = res.message
          this.dialogVisible = false
        } else {
          this.$message({
            type: "error",
            message: res.message
          })
        }
      })
    },
    //当天每个时间点剩余任务数
    TimeTaskLists() {
      TimeTaskList().then(res => {
        this.timetasklist = Object.entries(res.data).map((item, index) => {
          return {time: item[0], num: item[1]}
        })
        console.log(this.timetasklist);
        this.MapLists()
      })
    },
    //各个分组申请人数
    MapLists() {
      MapList().then(res => {
        this.maplist = Object.entries(res.data).map((item, index) => {
          return {time: item[0], num: item[1]}
        })
        console.log(this.maplist);
        this.RedisLists()
      })
    },
    //查看redis 分组内任务还剩下多少
    RedisLists() {
      RedisList().then(res => {
        this.redislist = Object.entries(res.data).map((item, index) => {
          return {time: item[0], num: item[1]}
        })
      })
    },
  },
  created() {
    this.TimeTaskLists()
  }
}
</script>

<style scoped>

</style>
